import { Image, List } from 'antd-mobile'
import React from 'react'
import CityNameListItem from '../CityNameListItem';
import useCity from "../../../hooks/useCityHooks.js"

export default ({ data }) => {

    const citylist = data.citylist

    const { onCityEvent } = useCity()


    return (
        <>
            <div style={{
                margin: "20px"
            }}>
                {

                    Object.keys(citylist).map((city, index) => {
                        return (
                            <List.Item
                                key={city}
                            >
                                <h2 style={{
                                    borderBottom: "1px solid black"
                                }}> {city}</h2>
                                <CityNameListItem onCityEvent={onCityEvent} cityList={citylist[city]} />
                            </List.Item>)
                    })
                }
            </div>
        </>
    )
}